<template>
	<div class="staff">

		<!--顶部搜索栏-->
		<section class="head">
			<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
			<el-input placeholder="请输入您想搜索用户的姓名" v-model="seachObj.user.username"></el-input>
			<el-select v-model="seachObj.user.department" placeholder="请选择用户的部门" :disabled='status'>
				<el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-date-picker type="date" placeholder="选择日期" v-model="seachObj.user.startDate">
			</el-date-picker>
		</section>

		<!--侧边栏-->
		<aside-item :userid="userMessage.userid" :username="userMessage.username"></aside-item>

		<!--用户表格-->
		<el-table :data="staff_list" border style="width: 60%;font-size: 13px;margin-top: 60px;float: left;">
			<el-table-column label="员工信息表" align="center">
				<el-table-column label="用户id" prop="id" align="center" v-if="showCol">
				</el-table-column>
				<el-table-column prop="userid" label="工号" align="center">
				</el-table-column>
				<el-table-column prop="username" label="姓名" align="center">
				</el-table-column>
				<el-table-column prop="department" label="部门" align="center">
				</el-table-column>
				<el-table-column prop="post" label="职位" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" title="转正" @click="userEdit(scope.row.id)">转正</el-button>
						<el-button type="primary" title="查看" @click="userDetail(scope.row.id)">查看</el-button>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>

		</el-dialog>


		<el-dialog title="用户信息" :visible.sync="dialogFormVisible2" top="100px" width="1000px">
			<el-form :model="staff_detail" :rules="rules">
				<el-form-item>
					<img :src="staff_detail.userimg" v-if="status"/>
				</el-form-item>
				<el-form-item>
					<el-upload v-if="!status" class="avatar-uploader" action="1" :show-file-list="true" :before-upload="importexcel1" :auto-upload="false" :on-exceed="handleExceed" ref="userInfoform1" :limit="1" list-type="picture-card" accept=".jpg,.png">
					</el-upload>
				</el-form-item>
				<el-form-item prop="username">
					<span>姓名：</span>
					<el-input v-model="staff_detail.username" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<span>密码：</span>
					<el-input v-model="staff_detail.password" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="post">
					<span>职位：</span>
					<el-select v-model="staff_detail.post" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in job" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					</el-input>
				</el-form-item>
				<el-form-item prop="sex">
					<span>性别：</span>
					<el-select v-model="staff_detail.sex" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in sex" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="department">
					<span>部门：</span>
					<el-select v-model="staff_detail.department" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in department" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item prop="userid">
					<span>工号：</span>
					<el-input v-model="staff_detail.userid" :disabled='status'>
					</el-input>
				</el-form-item>

				<el-form-item prop="telephone">
					<span>电话：</span>
					<el-input v-model="staff_detail.telephone" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="type">
					<span>职位类型：</span>
					<el-select v-model="staff_detail.type" placeholder="请选择" :disabled='status'>
						<el-option v-for="item in job_type" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="salary">
					<span>基本工资：</span>
					<el-input v-model="staff_detail.salary" :disabled='status'>
					</el-input>
				</el-form-item>
				<el-form-item prop="startDate">
					<span>入职日期：</span>
					<el-date-picker v-model="staff_detail.startDate" type="date" placeholder="选择日期" :disabled='status'>
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="birthday">
					<span>生日：</span>
					<el-date-picker v-model="staff_detail.birthday" type="date" placeholder="选择日期" :disabled='status'>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="newSubmitForm1()">确 定</el-button>
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="pagination">
			<el-pagination background @current-change="handleCurrentChange" :page-size="seachObj.pageSize" :current-page.sync="seachObj.page" layout="prev, pager, next, jumper,total" :total="totalNum">
			</el-pagination>
		</div>
	</div>

</template>

<script>
	import asideItem from "../../common/asideblock"
	import { mapState, mapMutations } from 'vuex';
	export default {
		name: 'staff',

		components: {
			asideItem
		},

		data() {
			return {
				staff_list: [],

				staff_detail: {
					birthday: '',
					department: '',
					endDate: '',
					id: '',
					number: '',
					password: '',
					post: '',
					salary: '',
					sex: '',
					startDate: '',
					telephone: '',
					type: '',
					userid: '',
					userimg: '',
					username: '',
				},

				staff_salary: {
					userid: '',
					username: '',
					early: '0',
					late: '0',
					overtime: '0',
					fine: '0',
					finereason: '',
					awardaddition: '0',
					awardreason: ''
				},

				staff_performance: {
					userid: '',
					username: '',
					early: '0',
					late: '0',
					overtime: '0'
				},

				img_status: false,

				status: false,

				showCol: false,

				seachObj: {
					user: {
						//						username:'',
						//						userid:'',
						//						startDate:'',
						//						sex:''
					},
					page: 1,
					pageSize: 5
				},


				department: [],

				sex: [{
					value: '男',
					label: '男'
				}, {
					value: '女',
					label: '女'
				}],

				job_type: [{
					value: '1',
					label: '正式'
				}, {
					value: '0',
					label: '实习'
				}],

				userInfo: {
					salary: '',
					endDate: '',
					startDate: '',
					userid: '',
					type: '',
					department: '',
					post: '',
					telephone: '',
					number: '',
					birthday: '',
					sex: '',
					password: '',
					username: ''
				},

				rules: {
					username: [{
						required: true,
						message: '请选择员工名称',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入员工密码',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择员工性别',
						trigger: 'change'
					}],
					birthday: [{
						required: true,
						message: '请输入员工生日',
						trigger: 'blur'
					}],
					telephone: [{
						required: true,
						message: '请输入员工电话',
						trigger: 'blur'
					}],
					post: [{
						required: true,
						message: '请输入员工职位',
						trigger: 'blur'
					}],
					department: [{
						required: true,
						message: '请选择员工部门',
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '请选择员工类型',
						trigger: 'change'
					}],
					userid: [{
						required: true,
						message: '请输入员工工号',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请输入员工入职时间',
						trigger: 'blur'
					}],
					salary: [{
						required: true,
						message: '请输入员工薪资',
						trigger: 'blur'
					}],
				},
				
				job:[],

				value: '',

				value2: '',

				dialogFormVisible2: false,

				totalNum: '',

				imageUrl: '',
				userMessage:{
					username:'',
					userid:''
				},
				value1: ''
			}
		},
		mounted() {
			this.getData();
			this.getLoginUser();
		},
		methods: {

			getData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLUSER, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
//					vm.staff_list = res.data.data.data;
					for(var i=0;i<res.data.data.data.length;i++){
						if(res.data.data.data[i].type==0){
							var j=0;
							vm.staff_list[j]=res.data.data.data[i];
							j++;
						}
						
					}
					vm.totalNum = res.data.total;
					vm.loading = false;
				})
			},
			
			getLoginUser(){
				this.userMessage.username=decodeURI(this.$route.query.username);
				this.userMessage.userid=this.$route.query.userid;
			},
			
			userDetail(id) {
				var vm = this;
				vm.status = true;
				vm.$http.post(this.API.FINDONEUSER, JSON.stringify({
					id: id
				}), this.API.HEADER).then((res) => {
					vm.staff_detail = res.data.data.data;
					vm.staff_detail.birthday = res.data.data.data.birthday;
					vm.staff_detail.department = res.data.data.data.department;
					vm.staff_detail.endDate = res.data.data.data.endDate;
					vm.staff_detail.id = res.data.data.data.id;
					vm.staff_detail.number = res.data.data.data.number;
					vm.staff_detail.password = res.data.data.data.password;
					vm.staff_detail.post = res.data.data.data.post;
					vm.staff_detail.salary = res.data.data.data.salary;
					vm.staff_detail.sex = res.data.data.data.sex;
					vm.staff_detail.startDate = res.data.data.data.startDate;
					vm.staff_detail.telephone = res.data.data.data.telephone;
					vm.staff_detail.type = res.data.data.data.type;
					vm.staff_detail.userid = res.data.data.data.userid;
					vm.staff_detail.userimg = "http://localhost:8080/img/" + res.data.data.data.userimg + ".png";
					vm.staff_detail.username = res.data.data.data.username;
					vm.dialogFormVisible2 = true;
				})
			},

			userEdit(id) {
				var vm = this;
				vm.userDetail(id);
				vm.status = false;
			},


			handleCurrentChange(val) {
				var vm = this;
				vm.seachObj.page = val;
				vm.getData();
			},
			//日期格式化yy-mm-dd
			dateFormat(date) {
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if(month < 10) {
					month = "0" + month;
				}
				if(day < 10) {
					day = "0" + day;
				}
				return year + '-' + month + '-' + day;
			},
			search() {
				var vm = this;
				vm.seachObj.page = 1;
				vm.getData();
			}

		}
	}
</script>

<style lang="scss" scoped>
	#staff {
		width: 60%;
		margin: 50px auto;
		.el-table {
			width: 70%;
			margin-left: 5%;
			float: left;
		}
	}
	.el-table{
		border-radius: 10px;
		padding-bottom: 10px;
	}
	.head {
		margin: 0 auto;
		margin-top: 50px;
		padding-bottom: 20px;
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e6e6e6;
		.el-input {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-data-picker {
			width: 20%;
			float: right;
		}
		.el-select {
			width: 20%;
			float: right;
			margin-left: 10px;
		}
		.el-button {
			float: right;
			margin: 0 50px 0 10px;
		}
	}
	
	.el-dialog {
		.el-form {
			width: 80%;
			margin: 0 auto;
			.el-form-item {
				width: 45%;
				display: inline-block;
				span {
					width: 25%;
					display: inline-block;
					height: 20px;
					line-height: 20px;
					text-align: right;
				}
			
				.el-input {
					width: 70%;
					display: inline-block;
				}
				.el-select {
					width: 70%;
					display: inline-block;
				}
			}
			.el-form-item:first-child {
				width: 80%;
				margin: 15px auto;
				display: block;
				img{
					width: 150px;
					height: 150px;
					display: block;
					border-radius: 50%;
					margin: 0 auto 20px;
				}
			}
			.el-form-item:nth-child(2){
				width: 40%;
				margin: 15px auto;
				display: block;
				.el-upload{
					margin-left: 25px;
				}
			}
			.el-form-item:last-child{
				width: 80%;
				display: block;
			}
		}
	}
	
	.pagination {
		width: 100%;
		height: 24px;
		margin: 5% 0;
		font-size: 12px;
		text-align: right;
		float: right;
	}
</style>